<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
    <head>
    <meta charset="UTF-8">
    <title>在线考试系统</title>
    <link rel="icon" href="/ExamOnline/favicon.ico" />
    <link rel="stylesheet" type="text/css" href="/ExamOnline/easyui/themes/default/easyui.css">
	<link rel="stylesheet" type="text/css" href="/ExamOnline/easyui/themes/icon.css">
	<script type="text/javascript" src="/ExamOnline/easyui/jquery.min.js"></script>
	<script type="text/javascript" src="/ExamOnline/easyui/jquery.easyui.min.js"></script>
    <style>
		#container {
			width: 90%;
			margin: 10px auto;
		}
		 #tabs .tabs-panels .panel .panel-body {
				overflow:hidden;
			} 
	</style>
    </head>
    <body>
    <div id="container" >
      <div id="panels" class="easyui-layout" style="width:100%;">
        <div data-options="region:'north',title:'2017年10月25日',split:true" style="height:80px;">
        	<div style="width:300px;font-size:30px;float:left;">在线考试系统</div>
        	<div style="width:300px;font-weight:bold; float:right;margin-right: 10px; line-height: 80px;">欢迎您，张三&nbsp;<a href="#">退出</a></div>
        </div>
        <div data-options="region:'west',title:'West',split:true" style="width:200px;">
        	<ul id="tt">
               
            </ul>
        </div>
        <div data-options="region:'center'" style="background:#eee;height:auto" class="easyui-tabs" id="tabs">
           <div title="First Tab" style="padding:10px">
            	  欢迎使用！
            </div>
      </div>
    </div>
</body>
</html>
<script>
	$("#panels").height($(document).height());
	$("#tt").tree({
		url:"/ExamOnline/json/tree_data.json",
		method:'get', 
		animate:true,//动画效果
		lines:true,//树菜单的线条效果
		onClick: function(node){
			//alert(node.text);  // alert node text property when clicked
			var text = node.text; 
			var url = node.attributes.url;
			if($('#tt').tree('isLeaf',node.target)){//判断是否是叶子节点
				if ($("#tabs").tabs('exists', text)) {   //若选项卡已存在，选择该选项卡，否则创建新的选项卡
					$("#tabs").tabs('select', text);
				}else{
					var content = '<iframe scrolling="no" frameborder="0"  src="'+url+'" style="width:100%;height:100%;"></iframe>';  
					$('#tabs').tabs('add', {//创建新的选项卡
		                title:  node.text,  //选项卡的标题
		                content:content,
		                //href: "interviewQ.html", //内容链接，通过连接加载选项卡内容，也可以通过content属性来指定内容
		                closable: true//是否可关闭
		            });
				}
        	}else{//判断当前节点是否展开，如果展开，那么关闭，如果关闭那么展开
        		if(node.state=='open'){
        			$('#tt').tree('collapse',node.target);
        		}else{
        			$('#tt').tree('expand',node.target);
        		}
        	}
		}
	});
</script>